import LoginModal from "@/components/LoginModal"
import { LoginModalActionType } from "@/components/LoginModal/types"
import { updateUserAppConfigApi } from "@/services"
import { appConfigActions } from "@/store/appConfigSlice"
import { offActions } from "@/store/offSlice"
import { userActions } from "@/store/userSlice"
import { useAppDispatch, useAppSelector } from "@/utils/hooks"
import { isEmpty } from "lodash"
import { appLocalStorage, Icon, Image } from "magic-ui-react"
import { userInfo } from "os"
import { useRef } from "react"
import styles from './styles.module.less'

const UserInfo = () => {

  const {
    user: {
      userInfo
    },
    appConfig
  } = useAppSelector(state => state)

  const dispatch = useAppDispatch()

  const updateUserAppConfig = async () => {
    try {
      const newAppConfig = JSON.stringify(appConfig)
      const userInfo = appLocalStorage.getValue('userInfo')
      await updateUserAppConfigApi(
        userInfo._id,
        newAppConfig
      )
    } catch (error) {
    }
  }

  const logout = () => {
    appLocalStorage.setValue('token', '')
    appLocalStorage.setValue('userInfo', {})
    dispatch(userActions.updateUserInfo({}))
  }

  return (
    <div className={styles.UserInfo}>
      <div className="flex items-center gap-5">
        <Image src={userInfo.avatar} circular width={50} height={50} />
        <div>
          {userInfo.username}
        </div>
      </div>
      <div className="flex gap-4 cursor-pointer items-center">
        <Icon
          title="设置"
          size={20}
          icon="gear"
          className="hover:text-yellow-500 transition duration-300 align-middle"
          onClick={() => {
            dispatch(offActions.update({
              settingMenu: true
            }))
          }}
        />
        {isEmpty(userInfo) ? (
          <span
            onClick={() => {
              dispatch(offActions.update({
                login: true
              }))
            }}>
            登录
          </span>
        ) : (
          <>
            {/* <Icon size={20} icon="user-pen" className="hover:text-yellow-500 transition duration-300" /> */}
            <Icon
              title="退出登录"
              size={20}
              className="hover:text-yellow-500 transition duration-300"
              onClick={() => logout()}
              icon="arrow-right-from-bracket"
            />
          </>
        )}
      </div>
    </div>
  )
}

export default UserInfo